<template>
    <div class="home_box">
        <div class="top">
            <div class="nav">
                <ul class="site-nav-l">
                    <li class="text" @click="collect()"><i class="el-icon-star-on icon"></i>收藏网站</li>
                    <li class="text" @click="getPhone()"><i class="el-icon-phone icon"></i>客服联系电话</li>
                    <li class="text" @click="goOrderFlowers()"><i class="el-icon-s-home icon"></i>订花</li>
                    <li class="text" @click="merchantsIn()"><i class="fa fa-handshake-o icon"></i>商家入驻</li>

                </ul>
                <ul class="site-nav-r">

                    <li v-if="userInfo==null" class="text" @click="$refs.loginDia.openDia()">你好！请登录</li>
                    <li v-if="userInfo==null"  class="text" @click="$refs.registerDia.openDia()">注册</li>

                    <li v-if="userInfo!=null" class="text" >{{userInfo.name}}</li>
                    <li v-if="userInfo!=null"  class="text" @click="logout()">退出登录</li>

                    <li class="text" @click="goOrder()">订单查询</li>
                    <li class="text" @click="goCart()"><i class="fa fa-shopping-cart icon"></i>购物车</li>
                </ul>
            </div>
        </div>
        <router-view/>
        <loginDia ref="loginDia"></loginDia>
        <registerDia ref="registerDia"></registerDia>
    </div>
</template>

<script>
    export default {
        name: "index",
        components: {
            'loginDia': () => import('./module/loginDia'),
            'registerDia': () => import('./module/registerDia'),
        },
        computed: {
            //用户信息
            userInfo() {
                return this.$store.state.userInfo
            },
        },
        methods: {

            logout(){
                this.$confirm('是否确认退出登录?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$HttpService.get("/logout").then(res => {
                        this.$util.clearSession();
                        window.location.reload()
                    })
                })
            },


            //订单查询
            goOrder(){
                this.$router.push('/home/order')
            },
            //购物车
            goCart(){
                this.$router.push('/home/cart')
            },

            //鲜花首页
            goOrderFlowers(){
                this.$router.push('/home/orderFlowers')
            },

            //商户入驻
            merchantsIn(){
                //跳转路由
                this.$router.push('/home/merchantsIn')
            },

            //获取联系电话
            getPhone(){
                alert("客服联系电话："+this.$config.websiteInfo.customerPhone);
            },

            //收藏
            collect() {
                try {
                    window.external.addFavorite(window.location.href, "同城鲜花配送站");
                } catch (e) {
                    try {
                        window.sidebar.addPanel(title, url, "");
                    } catch (e) {
                       alert("抱歉，您所使用的浏览器无法完成此操作。\n\n加入收藏失败，请使用Ctrl+D进行添加");
                    }

                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .home_box {
        width: 100%;
        .top {
            font-size: 12px;
            min-width: 1200px;
            height: 35px;
            border-bottom: 1px solid #e6e6e6;
            background-color: #f2f2f2;

            .nav {
                width: 1200px;
                margin: 0 auto;
                padding-right: 0;
                line-height: 35px;

                .icon {
                    font-size: 19px;
                    color: #ffb680;
                    margin-right: 5px;
                }

                .site-nav-l {
                    float: left;

                    li:not(:nth-child(1)) {
                        margin-left: 30px;
                    }
                }

                .site-nav-r {
                    float: right;

                    li:not(:nth-child(1)) {
                        margin-left: 30px;
                    }
                }

                ul {
                    margin: 0;
                    padding: 0;
                    list-style: none;

                    li {
                        line-height: 34px;
                        display: block;
                        float: left;
                        cursor: pointer;
                    }

                    li:hover {
                        color: #ffb680;
                    }
                }

                .text {
                    font-size: 13px;
                    color: #71797F;
                }
            }
        }

    }
</style>
